<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>人脸识别系统</title>

    <link rel="stylesheet" href="/arcsoft-face/layui/css/layui.css">

    <script src="/arcsoft-face/jquery/jquery-3.3.1.min.js"></script>
    <script src="/arcsoft-face/layui/layui.js"></script>
    <style type="text/css">
        html,body{
            /*background-color: #efeff4;*/
            padding: 0px;
            margin: 0px;
            text-align: justify;
            font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }
        .head{
            width: 100%;
            height: 44px;
            background-color: #403737;
            color: #fff;
            font-size: 14px;
            display:flex;
            display: -webkit-flex;
            -webkit-flex-direction:row;
            line-height: 40px;
            position: fixed;
            top: 0;
            z-index: 99;
            box-shadow: 0 1px 6px #ccc;
        }
        .a,.c{
            width:44px;
            float: right;
            margin-right: 0px;
            margin-left: 16px;
            font-size: 13px;
        }
        .b {
            flex:1;
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            line-height: 44px;
            white-space: nowrap;
        }
        .arrow{
            line-height: 34px;
            ont-family: Muiicons;
            font-size: 28px;
            font-weight: 400;
            font-style: normal;
            display: inline-block;
            text-decoration: none;
            -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body onload="getUser()">
<div class="head">
    <div class="a" @click="goback">返 回</div>
    <div class="b">人脸识别系统</div>
    <div class="c"></div>
</div>
<div class="content-img" style="margin-top: 52px">
<div class="layui-tab">
    <ul class="layui-tab-title" style="display: flex;justify-content: space-between;">
        <li class="layui-this" style="width: 50%">人脸注册</li>
        <li style="width: 50%">人脸搜索</li>
    </ul>
  <div style="position: absolute;margin-left: 40px" >
      <style type="text/css">
          table.hovertable {
              font-family: verdana,arial,sans-serif;
              font-size:11px;
              color:#333333;
              border-width: 1px;
              border-color: #999999;
              border-collapse: collapse;
          }
          table.hovertable th {
              background-color:#c3dde0;
              border-width: 1px;
              padding: 8px;
              border-style: solid;
              border-color: #a9c6c9;
          }
          table.hovertable tr {
              background-color:#d4e3e5;
          }
          table.hovertable td {
              border-width: 1px;
              padding: 8px;
              border-style: solid;
              border-color: #a9c6c9;
          }
      </style>

      <#--<table class="hovertable" id="userTable">-->
          <#--<tr id="firstTr">-->
              <#--<th>用户姓名</th><th>注册时间</th>-->
          <#--</tr>-->

      <#--</table>-->
  </div>
    <div class="layui-tab-content" style="">
        <div class="layui-tab-item layui-show"><#include "face_registration.ftl"></div>
        <div class="layui-tab-item"><#include "face_search.ftl"></div>

    </div>
</div>
<script src="/arcsoft-face/js/js_api.js"></script>
<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script>
<script>eruda.init();</script>
<script type="text/javascript">

=
    function getUserInfo() {
        //调用获取用户信息
        window.jsApi.getUserInfo()
                .then(res => {
            console.log(res);
        content.studentId = res.result.KEY_ID;
        if(res.result.IDENTITY_NAME == "教职工"){
            content.handle = true;
        }
    })
    .catch(
                err => {alert(err)}
    );
    }

    function getUser() {  //判断是否登录

//    console.log("xxxxxxx"+ window.jsApi)
        //先jsapi登录
        window.jsApi.login({appKey: '000000'})
                .then(res => {
            // console.log(res)
            getUserInfo();

    })
    .catch(err => {alert(err)});
    }
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

    });
    $(function () {
       f();
    })
    function goback() {
        window.history.back(-1);
    }
    function f() {
        $.ajax({
            type:"get",
            url:"/arcsoft-face/userInfo",
            success:function (userList) {
                if(userList.length == 0)
                {
                    let addElement = "<h2>暂无用户</h2>";
                    $("#userTable").append(addElement);
                }
                for (let i = 0; i < userList.length; i++) {
                    let userName = userList[i].name;
                    let createTime = userList[i].createTime.toString().slice(0,10);
                    let addElement = "<tr onmouseover='this.style.backgroundColor='#ffff66';' onmouseout='this.style.backgroundColor='#d4e3e5';'><td>"+userName+"</td><td>"+createTime+"</td></tr>";
                    $("#userTable").append(addElement);
                }
            },
            dataType:"json",
            error: function (error) {
                alert(JSON.stringify(error))
            }
        });
    }

</script>
</html>